<template>
	<view class="input_class">
		<view class="name_class">
			<span class="name"><span class="start">*</span>联系人</span>
			<input :placeholder-style="inputPlaceHolderStyle"
				class="input" type="text" placeholder="请输入姓名" v-model="userInfo.name">
		</view>
		<view class="name_class">
			<span class="name"><span class="start">*</span>联系电话</span>
			<input :placeholder-style="inputPlaceHolderStyle"
				type="text" placeholder="请输入电话号码" v-model="userInfo.tel">
		</view>
		<!-- <view class="name_class">
			<span class="name"><span class="start">*</span>联系地址</span>
			<view style="position: relative;" @click="getAddress">
				<input :placeholder-style="inputPlaceHolderStyle"
					class="input-address" type="text" placeholder="请选择地址" v-model="userInfo.address" disabled >
				<image class="left" src="https://jiechendy.sdshengyue.cn/uploads/8a/206fe6237202dec13798180795aeb1.png"></image>
			</view>
		</view> -->
		<view class="name_class">
			<span class="name"><span class="start">*</span>联系地址</span>
			
				<input :placeholder-style="inputPlaceHolderStyle"
					 type="text" placeholder="请输入地址" v-model="userInfo.address" >
		
		</view>

		<view class="name_class">
			<span class="name"><span class="start">*</span>申请类型</span>
			<input :placeholder-style="inputPlaceHolderStyle" disabled="true"
				type="text" placeholder="" v-model="userInfo.businessName">
		</view>
		<view class="name_class">
			<span class="name"><span class="start">*</span>企业名称</span>
			<input :placeholder-style="inputPlaceHolderStyle"
				type="text" placeholder="请输入企业名称" v-model="userInfo.qyname">
		</view>
	</view>
	<view class="center">
		<view class="card-text">
			<span class="start">*</span>请拍摄并上传您的门店照片
		</view>
		<view class="card-img">
			<view class="card-img2" @click="zphotoFn(0)">
				<image class="img" src="../../static/images/zhaopian.png" v-if="userInfo.frontCard==''"></image>
				<image class="img" :src="userInfo.frontCard" v-else></image>
			</view>
		</view>

	</view>
	<view class="center">
		<view class="card-text">
			<span class="start">*</span>请拍摄并上传您的仓库照片
		</view>
		<view class="card-img">
			<view class="card-img2" @click="zphotoFn(2)">
				<image class="img" src="../../static/images/zhaopian.png" v-if="userInfo.businessNameCard==''"></image>
				<image class="img" :src="userInfo.businessNameCard" v-else></image>
			</view>
		</view>
	</view>
	<view class="center">
		<view class="card-text">
			<span class="start">*</span>请拍摄并上传您的企业商标
		</view>
		<view class="card-img">
			<view class="card-img2" @click="zphotoFn(1)">
				<image class="img" src="../../static/images/zhaopian.png" v-if="userInfo.shangbiao==''"></image>
				<image class="img" :src="userInfo.shangbiao" v-else></image>
			</view>
		</view>
	</view>
	<view class="name_class1">
		<span class="name"><span class="start">*</span>企业详情</span>
			<textarea maxlength='-1' style="width: 100%;" class="yemian" placeholder="请输入详情" v-model="userInfo.qiyedetail"></textarea>
	</view>
	<view class="bitton" @click="emitFn">
		提交申请
	</view>
	<view class="bottom">

	</view>
</template>
<script setup>
	import { ref, reactive, computed } from 'vue'
	import { uploadImage } from '@/api/app'
	import { authentication } from '@/api/user'
	const inputPlaceHolderStyle=ref("color:#AAAAAA")
	const userInfo=ref({
					name:'',
					tel:null,
					businessName:'企业类型',
					address:'',
					frontCard:'',
					businessNameCard:'',
					shangbiao:'',
					qiyedetail:'',
					qyname:''
				})
	
	const uploadImageIng = async (file,num) => {
	    uni.showLoading({
	        title: '正在上传中...'
	    })
	    try {
	        const res = await uploadImage(file)
	        uni.hideLoading()
			// console.log(res,'resssss')
	  //       console.log(res.uri,'uri')
	        // emit('update:modelValue', res[props.fileKey])
			// console.log(res,'re');
			// return res.uri
			if(num==0){
				userInfo.value.frontCard=res.uri
			}
			if(num==1){
				userInfo.value.businessNameCard=res.uri
			}
			if(num==2){
				userInfo.value.shangbiao=res.uri
			}
			// console.log(userInfo.value.frontCard,'userInfo.value.frontCard');
	    } catch (error) {
	        uni.hideLoading()
	        uni.$u.toast(error)
	    }
		
	}
	
	const zphotoFn=(num)=>{
		uni.chooseImage({
		  count: 1, // 最多选择一张图片
		  sourceType: ['album', 'camera'], // 只允许从相机选择
		  sizeType:['original', 'compressed'],
		   quality: 50,
		  success: (res) => {
		    // console.log(res)
		    const tempFilePaths = res.tempFilePaths
		    // 在这里处理图片文件
			// console.log(tempFilePaths);
			if(num==0){
				// console.log(res.tempFilePaths[0],"11");
				uploadImageIng(res.tempFilePaths[0],0)
								// console.log(userInfo.value.frontCard,'userInfo.value.frontCard');
			}else if(num==2){
				uploadImageIng(res.tempFilePaths[0],1)
				// userInfo.value.businessNameCard=res.tempFilePaths[0]
			}else if(num==1){
				uploadImageIng(res.tempFilePaths[0],2)
			}
			// console.log(userInfo.value.userInfo);
		  }
		})
	}
	
	const getAddress=()=>{
		console.log(111111111);
		uni.chooseLocation({
			success: (res)=> {
				userInfo.value.address=res.address
			}
		});
	}
	
	const emitFn=async()=>{
		
		if(userInfo.value.name==''){
			uni.showToast({
				title: '请输入姓名',
				icon:"none",
			});
			return false
		}
		 if(userInfo.value.tel==null){
			uni.showToast({
				title: '请输入电话号',
				icon:"none",
			});
			return false
		}
		var reg=/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
			
			if(!reg.test(userInfo.value.tel)){
				uni.showToast({
					title: '手机格式错误',
					icon:"none",
				});
				return false;
			}
		
		if(userInfo.value.businessName==''){
			uni.showToast({
				title: '请输入申请类型名称',
				icon:"none",
			});
			return false;
		}
		if(userInfo.value.qyname==''){
			uni.showToast({
				title: '请输入企业名称',
				icon:"none",
			});
			return false;
		}
		if(userInfo.value.address==''){
			uni.showToast({
				title: '请选择地址',
				icon:"none",
			});
			return false;
		}
		 if(userInfo.value.frontCard==''  || userInfo.value.businessNameCard=='' || userInfo.value.shangbiao==''){
			uni.showToast({
				title: '请上传照片',
				icon:"none",
			});
			return false;
		}
		
		if(userInfo.value.qiyedetail==''){
			uni.showToast({
				title: '请填写详情',
				icon:"none",
			});
			return false;
		}
		
		let data1=await authentication({
			realname:userInfo.value.name,
			phone:userInfo.value.tel,
			address:userInfo.value.address,
			storeimg:userInfo.value.frontCard,
			warehouseimg:userInfo.value.businessNameCard,
			leixing:1,
			qyimg:userInfo.value.shangbiao,
			qyxaingqing:userInfo.value.qiyedetail,
			qyname:userInfo.value.qyname
		})
		
		if(data1.data==0){
			uni.showToast({
				title:'不能重复申请',
				icon:'none'
			})
		}
		if(data1.data==2){
			uni.showToast({
				title:'申请失败',
				icon:'none'
			})
		}
		if(data1.data==1){
			uni.showToast({
				title:'申请成功',
				icon:'none'
			})
		}
		userInfo.value.name=''
		userInfo.value.tel=null
		userInfo.value.address=''
		userInfo.value.frontCard=''
		userInfo.value.businessNameCard=''
		userInfo.value.qiyedetail=''
		userInfo.value.shangbiao=''
		userInfo.value.qyname=''
		// if()
		console.log(data,'yiyerenz');
		
	}
			
</script>

<style lang="scss" scoped>
	.name_class1{
		// display: flex;
		// justify-content: space-between;
		height: 350rpx;
		background-color: #fff;
		line-height: 100rpx;
		box-sizing: border-box;
		border: 2rpx solid #F8F8F8;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 25rpx;
	}
	.yemian{
		height: 154rpx;
		background-color: #fff;
	}
	.input-address {
		margin-right: 40rpx;
	}
	.start{
		color: red;
	}

	.left {
		position: absolute;
		right: 0;
		width: 30rpx;
		height: 27rpx;
		top: 12rpx;
	}



	.input_class {
		margin-top: 20rpx;
	}

	.name_class {
		display: flex;
		justify-content: space-between;
		height: 100rpx;
		background-color: #fff;
		// line-height: 100rpx;
		box-sizing: border-box;
		border: 2rpx solid #F8F8F8;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 25rpx;
	}

	.name {
		padding-top: 5rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	input {
		// color: #cccccc;
		width: 378rpx;
		text-align: right;
		height: 34rpx;
		// border-radius: 0rpx 0rpx 0rpx 0rpx;
		// opacity: 1;
		width: 378rpx;
		height: 34rpx;
		font-size: 24rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;


	}

	input::placeholder {
		color: red !important;
	}

	.placeholder {
		color: #AAAAAA;
	}

	.center {
		// width: 690rpx;
		width:100%;
		height: 230rpx;
		background: #FFFFFF;
		opacity: 1;
	}

	.card-text {
		width: 388rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		line-height: 48rpx;
		padding-left: 20rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		// margin: 14rpx 44rpx 12rpx 46rpx;
	}

	.card-img {
		display: flex;
		justify-content: space-between;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.card-img2 {
		width: 120rpx;
		height: 120rpx;
	}

	.card-text2 {
		width: 314rpx;
		height: 56rpx;
		background: #2568BC;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		text-align: center;
		color: #FFFFFF;
		line-height: 56rpx;
	}

	.bitton {
		// position: absolute;
		// bottom: 54rpx;
		margin-top: 60rpx;
		width: 690rpx;
		height: 104rpx;
		margin-bottom: 60rpx;
		background: linear-gradient(90deg, #59C381 0%, #61D59A 42%, #6AE9B5 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx !important;
		opacity: 1;
		border-radius: 72rpx;
		text-align: center;
		line-height: 104rpx;
		color: #FFFFFF;
		margin-left: 30rpx;
	}

	.bottom {
		height: 122rpx;
	}
</style>